<template>
	<div class="auth-config-form">
		<!-- 认证类型选择 -->
		<a-form-item label="认证类型" name="authType">
			<a-select v-model:value="authType" placeholder="请选择认证类型" @change="handleAuthTypeChange">
				<a-select-option value="BEARER_TOKEN">Bearer Token</a-select-option>
				<a-select-option value="API_KEY">API Key</a-select-option>
				<a-select-option value="BASIC_AUTH">Basic Auth</a-select-option>
				<a-select-option value="NONE">无认证</a-select-option>
			</a-select>
		</a-form-item>

		<!-- Bearer Token 认证配置 -->
		<template v-if="authType === 'BEARER_TOKEN'">
			<a-form-item label="访问令牌" name="auth_token" required>
				<a-input-password v-model:value="authToken" placeholder="请输入访问令牌" @change="handleAuthConfigChange" />
			</a-form-item>
			<a-form-item label="令牌前缀" name="auth_prefix">
				<a-input v-model:value="authPrefix" placeholder="Bearer " @change="handleAuthConfigChange" />
				<div class="form-help-text">Authorization头中的前缀，默认为"Bearer "</div>
			</a-form-item>
		</template>

		<!-- API Key 认证配置 -->
		<template v-if="authType === 'API_KEY'">
			<a-form-item label="API密钥" name="auth_apiKey" required>
				<a-input-password v-model:value="authApiKey" placeholder="请输入API密钥" @change="handleAuthConfigChange" />
			</a-form-item>
			<a-form-item label="密钥名称" name="auth_keyName" required>
				<a-input v-model:value="authKeyName" placeholder="X-API-Key" @change="handleAuthConfigChange" />
				<div class="form-help-text">API密钥在请求中的参数名称</div>
			</a-form-item>
			<a-form-item label="密钥位置" name="auth_location">
				<a-radio-group v-model:value="authLocation" @change="handleAuthConfigChange">
					<a-radio value="header">请求头</a-radio>
					<a-radio value="query">查询参数</a-radio>
				</a-radio-group>
			</a-form-item>
		</template>

		<!-- Basic Auth 认证配置 -->
		<template v-if="authType === 'BASIC_AUTH'">
			<a-form-item label="用户名" name="auth_username" required>
				<a-input v-model:value="authUsername" placeholder="请输入用户名" @change="handleAuthConfigChange" />
			</a-form-item>
			<a-form-item label="密码" name="auth_password" required>
				<a-input-password v-model:value="authPassword" placeholder="请输入密码" @change="handleAuthConfigChange" />
			</a-form-item>
		</template>
	</div>
</template>

<script setup>
	import { ref, watch } from 'vue'

	// Props
	const props = defineProps({
		modelValue: {
			type: Object,
			default: () => ({})
		}
	})

	// Emits
	const emit = defineEmits(['update:modelValue', 'change'])

	// 认证配置
	const authType = ref(props.modelValue.authType || 'BEARER_TOKEN')
	const authToken = ref(props.modelValue.auth_token || '')
	const authPrefix = ref(props.modelValue.auth_prefix || 'Bearer ')
	const authApiKey = ref(props.modelValue.auth_apiKey || '')
	const authKeyName = ref(props.modelValue.auth_keyName || 'X-API-Key')
	const authLocation = ref(props.modelValue.auth_location || 'header')
	const authUsername = ref(props.modelValue.auth_username || '')
	const authPassword = ref(props.modelValue.auth_password || '')

	// 监听props变化
	watch(
		() => props.modelValue,
		(newVal) => {
			if (newVal) {
				authType.value = newVal.authType || 'BEARER_TOKEN'
				authToken.value = newVal.auth_token || ''
				authPrefix.value = newVal.auth_prefix || 'Bearer '
				authApiKey.value = newVal.auth_apiKey || ''
				authKeyName.value = newVal.auth_keyName || 'X-API-Key'
				authLocation.value = newVal.auth_location || 'header'
				authUsername.value = newVal.auth_username || ''
				authPassword.value = newVal.auth_password || ''
			}
		},
		{ deep: true, immediate: true }
	)

	// 更新配置
	const updateConfig = () => {
		const config = {
			authType: authType.value
		}

		// 添加认证配置
		if (authType.value === 'BEARER_TOKEN') {
			config.auth_token = authToken.value
			config.auth_prefix = authPrefix.value
		} else if (authType.value === 'API_KEY') {
			config.auth_apiKey = authApiKey.value
			config.auth_keyName = authKeyName.value
			config.auth_location = authLocation.value
		} else if (authType.value === 'BASIC_AUTH') {
			config.auth_username = authUsername.value
			config.auth_password = authPassword.value
		}

		emit('update:modelValue', config)
		emit('change', config)
	}

	// 处理认证类型变化
	const handleAuthTypeChange = () => {
		// 清空之前的认证配置
		authToken.value = ''
		authPrefix.value = 'Bearer '
		authApiKey.value = ''
		authKeyName.value = 'X-API-Key'
		authLocation.value = 'header'
		authUsername.value = ''
		authPassword.value = ''
		updateConfig()
	}

	// 处理认证配置变化
	const handleAuthConfigChange = () => {
		updateConfig()
	}

	// 获取当前认证配置
	const getAuthConfig = () => {
		const config = {
			authType: authType.value
		}

		if (authType.value === 'BEARER_TOKEN') {
			config.auth_token = authToken.value
			config.auth_prefix = authPrefix.value
		} else if (authType.value === 'API_KEY') {
			config.auth_apiKey = authApiKey.value
			config.auth_keyName = authKeyName.value
			config.auth_location = authLocation.value
		} else if (authType.value === 'BASIC_AUTH') {
			config.auth_username = authUsername.value
			config.auth_password = authPassword.value
		}

		return config
	}

	// 暴露方法给父组件
	defineExpose({
		getAuthConfig
	})
</script>

<style scoped>
	.auth-config-form {
		padding: 0;
	}

	.form-help-text {
		font-size: 12px;
		color: #999;
		margin-top: 4px;
	}
</style>
